<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        th{
            background-color: darkred;
            width: 100px;
            height: 40px;
            color: white;
        }
        td{
            text-align: center;
        }
        input{
            margin-bottom: 20px;
        }
        button{
            margin-top: 20px;
            margin-bottom: 20px;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
品牌：<input type="text" id="id1" placeholder="请输入品牌"><br>
型号：<input type="text" id="id2" placeholder="请输入产品型号"><br>
参数：<input type="text" id="id3" placeholder="请输入产品参数"><br>
价格：<input type="text" id="id4" placeholder="请设置产品价格"><br>
国别：<select id="id5">
        <option value="请选择...">请选择...</option>
        <option value="中国">中国</option>
        <option value="美国">美国</option>
        <option value="法国">法国</option>
        <option value="日本">日本</option>
        <option value="韩国">韩国</option>
        <option value="德国">德国</option>
        <option value="英国">英国</option>
    </select><br>
<button type="submit" id="sub">添加信息</button>
<table border="1px" cellspacing="0">
    <tr id="tr">
        <th>品牌</th>
        <th>型号</th>
        <th>参数</th>
        <th>价格</th>
        <th>国别</th>
    </tr>

</table>
<script>
    $('#sub').click(function () {
        if($('#id1').val() == "" || $.trim($('#id1').val()).length == 0 || $('#id2').val() == "" ||
            $.trim($('#id2').val()).length == 0 || $('#id3').val() == "" || $.trim($('#id3').val()).length == 0 ||
        $('#id4').val() == "" || $.trim($('#id4').val()).length == 0 || $('#id5').val() == "" || $.trim($('#id5').val()).length == 0){
            alert("参数不能为空！")
        }
        else{
                $('#tr').after('<tr><td id="td1"></td><td id="td2"></td><td id="td3"></td><td id="td4"></td><td id="td5"></td></tr>')
                $('#td1').text($('#id1').prop('value'))
                $('#td2').text($('#id2').prop('value'))
                $('#td3').text($('#id3').prop('value'))
                $('#td4').text($('#id4').prop('value'))
                $('#td5').text($('#id5').prop('value'))

                $('#id1').prop('value','')
                $('#id2').prop('value','')
                $('#id3').prop('value','')
                $('#id4').prop('value','')
                $('#id5').prop('value','')
            }
    })
</script>
</body>
</html>
